<template>
  <t-dialog
    :header="`${header}-录入专家意见`"
    :visible.sync="visible"
    :onClose="closeDialog"
    :closeOnOverlayClick="false"
    :onConfirm="confirm"
    confirmBtn="确定"
    width="80%"
    top="5%"
  >
    <div :style="{ height: '65vh' }">
      <t-table
        :selected-row-keys="selectedRowKeys"
        @select-change="
          (val) => {
            selectedRowKeys = val;
          }
        "
        rowKey="id"
        :data="data"
        :columns="columns"
      >
        <template #sort="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>

        <template #content="{ row }">
          <t-textarea v-model="row.content" placeholder="请输入评审意见" :autosize="{ minRows: 3 }" />
        </template>
        <template #file="{ row }">
          <file-upload
            v-model="row.sysAttMainVo.sysAttMainIds"
            :moduleKey="row.moduleKey"
            :fileList.sync="row.fileLists"
            :multiple="true"
          >
            <t-button variant="outline">
              <t-icon name="cloud-upload" slot="icon" />
              点击上传
            </t-button>
          </file-upload>
        </template>
        <template #projectApproval="{ row }">
          <!-- <t-select clearable  v-model="row.projectApproval"
                    :options="dict.type.outline_status">
          </t-select> -->
          <t-radio-group v-model="row.projectApproval">
            <t-radio value="1">是</t-radio>
            <t-radio value="0">否</t-radio>
          </t-radio-group>
        </template>

        <template #empty>
          <span>暂无数据 请点击新增按钮</span>
        </template>

        <template #footerSummary>
          <div class="t-table__row-filter-inner" style="display: flex">
            <div style="margin: auto" class="btn-group-inline">
              <t-button @click="addData">新增</t-button>
              <t-button @click="upData">上移</t-button>
              <t-button @click="downData">下移</t-button>
              <t-button @click="delData">删除</t-button>
            </div>
          </div>
        </template>
      </t-table>
    </div>
  </t-dialog>
</template>

<script>
import { VITE_FILE_DOMAIN } from '@/api/upload'
import { getFiles } from '@/api/common';
import FileUpload from '@/components/FileUpload/index.vue';

export default {
  name: 'expert-opinion-dialog',
  dicts: ['outline_status'],
  components: {
    FileUpload,
  },
  props: {
    objId: [String, Number],
    outlineId: [String, Number],
    header: String,
  },
  data() {
    return {
      site_tag: import.meta.env.VITE_SITE_TAG,
      file_domain: VITE_FILE_DOMAIN,
      visible: true,
      selectedRowKeys: [],
      data: [],
      columns: [
        {
          colKey: 'row-select',
          type: 'single',
          title: '选择',
          width: 20,
        },
        {
          colKey: 'sort',
          title: '序号',
          align: 'center',
          width: 30,
        },
        { colKey: 'content', title: '评审意见', width: '130' },
        { colKey: 'file', title: '评审附件', width: '50' },
        { colKey: 'projectApproval', title: '是否通过', width: '50' },
      ],
    };
  },
  watch: {
    objId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getObj(val);
        }
      },
    },
  },
  methods: {
    getObj(val) {
      this.$api.kjxm.review
        .projectExpertsInfoByReviewType({ projectId: this.objId, reviewType: '2' })
        .then((response) => {
          response.data.forEach(item => {
            if (item.sysAttMainVo == null) {
              item.sysAttMainVo = { sysAttMainIds: [] }
            }
            item.sysAttMainEntities.forEach(fileList => {
              fileList.name = fileList.fileName
              fileList.url = fileList.fullFilePath
            })
            item.fileLists = item.sysAttMainEntities
          })
          this.data = response.data || [];
        }).catch((e) => {
          this.$message.error(e.toString());
        });
    },
    confirm() {
      this.$api.kjxm.outline.addProjectExpertsInfo(this.data).then((res) => {
        this.$message.success("录入成功");
        this.$emit("update:visible", false);
      }).catch((e) => {
        this.$message.error(e.toString());
      });

    },
    closeDialog() {
      this.$emit('update:visible', false);
    },
    upData() {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一行');
        return;
      }
      if (this.data[0].id === this.selectedRowKeys[0]) {
        this.$message.warning('已是第一行');
      } else {
        const index = this.data.findIndex((val) => val.id === this.selectedRowKeys[0]);
        this.moveInArray(this.data, index, index - 1);
      }
    },
    downData() {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一行');
        return;
      }
      if (this.data[this.data.length - 1].id === this.selectedRowKeys[0]) {
        this.$message.warning('已是最后一行');
      } else {
        const index = this.data.findIndex((val) => val.id === this.selectedRowKeys[0]);
        this.moveInArray(this.data, index, index + 1);
      }
    },
    delData() {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一行');
        return;
      }
      const index = this.data.findIndex((val) => val.id === this.selectedRowKeys[0]);
      this.data.splice(index, 1);
      this.selectedRowKeys = [];
    },
    moveInArray(arr, ffrom, to) {
      // 删除当前的位置
      const item = arr.splice(ffrom, 1);
      // 确保还剩有元素移动
      if (!item.length) {
        this.$message.warning(`There is no item in the array at index ${ffrom}`);
      }
      // 移动元素到指定位置
      arr.splice(to, 0, item[0]);
    },
    addData() {
      const newId = Number(new Date().getTime()) + Number(Math.random() * 10);
      this.data.push({
        id: newId,
        projectId: this.objId,
        content: '',
        moduleKey: 'zjkYJ',
        fileLists: [],
        projectApproval: '1',
        sysAttMainVo: { sysAttMainIds: [] },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.tab-panel {
  padding: 10px;
  height: calc(65vh - 64px);
  overflow: scroll;
}
.tab-full-panel {
  padding: 10px;
  height: calc(80vh - 64px);
  overflow: scroll;
}
.t-form__item {
  margin-bottom: 6px;
}

.t-row {
  margin-bottom: 14px;
}
.exception-data {
  color: red;
  height: 100%;
  display: flex;
  align-items: center;
}

.step-card {
  height: 100%;
  margin-bottom: 14px;
}
</style>
